[#ftl]
[#compress]
[#include "util10.ftl"/]
[#--[#assign shrinksafe1 = "angel.core.freemarker.Shrinksafe"?new()]
[#macro shrinksafe key cached shrink contentType="script" CompilationLevel=""]
	[@shrinksafe1 key=key cached=cached shrink=shrink contentType=contentType CompilationLevel=CompilationLevel]
		[#nested][#if shrink]/*END_OF_shrinksafe*/[/#if]
	[/@]
[/#macro]
--]
 <!DOCTYPE html>
 <html>	
 <head>
 	<title>Beyond Prototype</title>
 	<meta name="title" content="Beyond Prototype">
 	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 	<style type="text/css">
 		@import "/dojo10/dojo/resources/dojo.css";
 		@import "/dojo10/dojo/resources/dnd.css";		
 		@import "/dojo10/dojox/layout/resources/ResizeHandle.css";
 		@import "/dojo10/dijit/themes/claro/claro.css";
 		@import "/dojo10/dojox/grid/resources/claroGrid.css";		
 	</style> 
 	<style type="text/css">
 	.dijitStackContainer {border: 1px solid #ccc;}
 	.dijitContentPane{border: 1px solid #ccc;background-color:white;}
 	</style> 
 	<script src="//cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
 	<script type="text/javascript">
 	 var dojoConfig = {parseOnLoad:false,isDebug:false}; 	 
 	 [#--
 	 var prototypeCode = window["localStorage"]["prototype${subject?js_string}"];
 	 delete window["localStorage"]["prototype${subject?js_string}"]; 
 	 --]/*@@@*/
 	[@shrinksafe key="p1" cached=false shrink=true]
 	 	var ls = window["localStorage"];
		var subject = ls["preview"];
		var prototypeCode = ls["prototype"+subject];
		delete ls["prototype"+subject];
	[/@]	
 	</script> 
 	<script src="/dojo10/dojo/dojo.js"></script>
 	<script type="text/javascript"> 	
 	 	require({async:false},["dojo/_base/array","dojo/_base/lang","dojo/ready","dojo/parser","dojo/query","dojo/dom-attr","dojo/_base/window","dojo/dom-construct","dojo/dom-style","dojo/json","dojo/has","dijit/registry", "dojo/sniff","dijit/form/SimpleTextarea","dijit/form/TextBox"]
	 	,function(array,lang,ready,parser,query,attr,_win,construct,style,json,has,registry,sniff,SimpleTextarea,TextBox){				
	 		var str = arguments.callee.toString().replace(/\n*/g,"").replace(/\s*/g,"");
	 		 var args = str.substring(str.indexOf("(") + 1,str.indexOf(")")).split(",");
	 		 for(var i = args.length - 1; i >= 0; i--){
	 			 window[args[i]] = arguments[i];
	 		 }
	 	});
 		 	 
[#-- 	 	
 	 	var html2image = function (widget,index){
 	 		
 	 		var children = widget.getChildren();
 	 		if(index < children.length){
 	 			widget.selectChild(children[index]);
 	 	 		html2canvas(widget.domNode,{
 					onrendered:function(canvas){
 						construct.place(canvas,_win.body(),"last");
 						html2image(widget,index+1);			
 					}
 				});
 	 		}else{
 	 			style.set(widget.domNode,{display:"none"});
 	 		} 		
 	 	}
--] 	 	
	 	[#assign pshuffledCode]
	 	[@shrinksafe key="phome" cached=false shrink=true CompilationLevel="WHITESPACE_ONLY"]
	 	[#include "agile/extend.ftl"/]	 	
 		ready(function(){ 			
 			var dom = construct.create("div",{innerHTML:prototypeCode});
 			attr.set(dom,"id","prototype");
// 			console.log("@@@prototypeCode=",dom);
 			query(".metadata",dom).forEach(function(node){
// 				console.log("@@@metadata=",node);
 				if(node.innerText){
// 					console.log("metadata=",node.innerText);
 					var metadata = json.parse(node.innerText,false); 					
 					_win.body().style.cssText = metadata.style;
// 					console.log("metadata=",node.innerText,metadata);
 					if(metadata.title){
 						document.title = metadata.title;
 					}
 				}
 			});
 			construct.place(dom,_win.body(),"last");	
 			
 			var mids = {};
 			query("[dojotype]",_win.body()).forEach(function(node){
 				mids[attr.get(node,"dojotype").replace(/\./g,"/")] = "";
 			});
 			query("[data-dojo-type]",_win.body()).forEach(function(node){	
 				mids[attr.get(node,"data-dojo-type").replace(/\./g,"/")] = "";
 			});
 			
 			query(".requiredClazz",_win.body()).forEach(function(node){	
 				for(var e = node.innerText.split(","), l =e.length - 1; l >= 0; l--){ 
 					mids[e[l].replace(/\./g,"/")] = "";
 				}
 			});
 			 			
 			for(var mid in mids){				
 				var name = mid.substring(mid.lastIndexOf("/") + 1);
 				require({async:false},mid,function(widget){
 					_win[name] = widget;
 				});					
 			}
 			 			
 			parser.parse(_win.body()).then(function(instances){
[#-- 	 			 		
 				html2canvas(_win.body(),{
 					onrendered:function(canvas){
 						construct.place(canvas,_win.body(),"last");
 						
 		 				array.forEach(instances,function(ins){
 		 					if(ins.declaredClass.indexOf("TabContainer") != -1
 		 							|| ins.declaredClass.indexOf("AccordionContainer") != -1){
 		 						html2image(ins,0); 		 				
 		 					}	
 		 				});
 					}
 				});
 				
 				
// 				html2canvas(c.domNode,{
//	 				onrendered:function(canvas){
//	 					construct.place(canvas,_win.body(),"last");	
//	 					
//	 					array.forEach(c.getChildren(),function(child){
//	 	 					
//	 	 					c.selectChild(child);
//	 	 					
//	 	 					html2canvas(c.domNode,{
//	 	 		 				onrendered:function(canvas){
//	 	 		 					construct.place(canvas,_win.body(),"last");
	 	 		 					//
//	 	 		 					var image = canvas.toDataURL("image/png");
//	 	 		 					var a = construct.create("a",{innerHTML:"Export"});
//	 	 		 	 				attr.set(a,{download:"test.png",href:image});	 	 		 	 				
//	 	 		 	 				construct.place(a,_win.body(),"first");	 	 				
//	 	 		 				}
//	 	 		 			});
//	 	 				});
//	 				}
//	 			});
--] 				
 			});
 			
 		});
 		[/@][/#assign]
 		${pshuffledCode?replace("\n","")}
 	</script>				
 </head>
 <body class="claro">

 </body>
 </html>
[/#compress]